<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tiny example</title>
    <script src="http://viz-js.com/bower_components/viz.js/viz.js"></script>
	<style>html,body{margin:0;padding:0;height:100%}</style>
	<script type="text/javascript">
	function showViz() {
		document.getElementById('show').innerHTML=Viz(document.getElementById('edit').value, "png")
	}
	</script>
  </head>
  <body onload='showViz()'>
	<div id="show" style="width:64%;height:100%;float:left;overflow:scroll;"></div>
	<div style="width:35%;height:100%;float:left;">
    <textarea id="edit" style="width:100%;height:90%;">
digraph graphname{ 
  // 语法教程 http://www.tuicool.com/articles/qeqeuyb
  fontsize=16 label="" // rankdir=LR;
  size="10,10"; // 单位是96px 最大宽度，最大高度
  graph[shape="box" fontsize=10]
  node[shape="box"  fontsize=10 color="black" bgcolor="red" distortion=.7]
  edge[fontsize=10 fontcolor="black" color="brown" style="filled"]"dadi_order_ticket_report"->"dw_dadi_ticket_success"
"gift_usage_log"->"dw_exchange_success"
"hp_cinema_member_relation"->"dw_exchange_success"
"sale_ticket_order"->"dw_exchange_success"
"sale_goods_sub_order_success"->"dw_goods_order_success"
"sale_goods_sub_order"->"dw_goods_order_success"
"sale_goods_order"->"dw_goods_order_success"
"sale_goods_sub_order_success"->"dw_goods_sub_order_success"
"sale_goods_sub_order"->"dw_goods_sub_order_success"
"sale_goods_order"->"dw_goods_sub_order_success"
"dw_cinema_info"->"dw_plan_info"
"dw_cinema_info"->"dw_plan_simple_info"
"dw_film_info"->"dw_plan_simple_info"
"sale_recharge_order_success"->"dw_recharge_success"
"sale_recharge_order"->"dw_recharge_success"
"hp_cinema_member_relation"->"dw_recharge_success"
"sale_payment_detail"->"dw_sale_payment_detail_all"
"sale_payment_detail"->"dw_sale_payment_detail_success"
"dw_plan_info"->"dw_ticket_all"
"dw_cinema_info"->"dw_ticket_all"
"dw_film_info"->"dw_ticket_all"
"dw_activity_scheme"->"dw_ticket_success"
"dw_plan_info"->"dw_ticket_success"
"dw_cinema_info"->"dw_ticket_success"
"dw_film_info"->"dw_ticket_success"
"dw_gift_storag_info"->"dw_ticket_success"
"report_film_office_box_history"->"dw_report_film_office_box"
"activity_execute_cinema"->"dw_activity_cinema_info"
"activity_scheme"->"dw_activity_cinema_info"
"extension_activity_info"->"dw_activity_extension_info"
"cinema_activity_reward_record"->"dw_activity_marketing_info"
"cinema_activity_reward"->"dw_activity_marketing_info"
"cinema_activity_basic"->"dw_activity_marketing_info"
"activity_execute_cinema"->"dw_activity_info"
"activity_scheme"->"dw_activity_info"
"activity_basic"->"dw_activity_info"
"dw_activity_extension_info"->"dw_activity_info"
"activity_execute_cinema"->"dw_activity_scheme"
"activity_scheme"->"dw_activity_scheme"
"activity_basic"->"dw_activity_scheme"
"member_card_info"->"dw_card_info"
"dw_card_info"->"dw_card_info"
"film_classify"->"dw_film_info"
"movie_schedules"->"dw_film_info"
"film_info"->"dw_film_info"
"gift_storage_coupon"->"dw_gift_storag_info"
"gift_storage_reality"->"dw_gift_storag_info"
"gift_storage_virtual"->"dw_gift_storag_info"
"gift_storage_voucher"->"dw_gift_storag_info"
"hp_cinema_info"->"dw_marketing_tool_cinema_day"
"gift_basic"->"dw_marketing_tool_cinema_day"
"extension_activity_info"->"dw_marketing_tool_cinema_day"
"cinema_activity_basic"->"dw_marketing_tool_cinema_day"
"poster_basic"->"dw_marketing_tool_cinema_day"
"hp_cinema_notice"->"dw_marketing_tool_cinema_day"
"popularise_basic"->"dw_marketing_tool_cinema_day"
"activity_execute_precept"->"dw_marketing_tool_cinema_day"
"custom_offer_info"->"dw_marketing_tool_cinema_day"
"recommend_cinema_record"->"dw_marketing_tool_cinema_day"
"data_cinema_info"->"dw_oa_cinema_info"
"data_cinema_info"->"dw_oa_cinema_info"
"vc_member_outlinecard"->"dw_outlinecard"
"dw_cinema_info"->"dw_user_info"
"dw_ye_cinema_info"->"dw_cinema_all"
"dw_zd_cinema_info"->"dw_cinema_all"
"dw_cinema_info"->"dw_cinema_all"
"dw_ticket_all"->"dw_cinema_all"
"hp_cinema_info"->"dw_cinema_info_snapshot"
"dw_oa_cinema_info"->"dw_cinema_info"
"m_source_cinema_hall_box_office"->"cinema_hall_boxoffice_yymmdd"
"m_source_cinema_hall_box_office_history"->"cinema_hall_boxoffice_yymmdd"
"m_source_cinema_hall_box_office"->"cinema_hall_boxoffice_yymmdd"
"m_source_movie_detial_new"->"ye_actor_info"
"m_source_cinema"->"dw_ye_cinema_hall_box_info"
"m_source_cinema"->"dw_ye_cinema_info"
"base_area_info"->"dw_ye_cinema_info"
"base_city_info"->"dw_ye_cinema_info"
"base_province_info"->"dw_ye_cinema_info"
"base_region_info"->"dw_ye_cinema_info"
"m_source_movie_detial_new"->"ye_company_cp_info"
"m_source_movie_detial_new"->"ye_company_fx_info"
"m_source_cinema"->"ye_company_info"
"m_source_movie_detial_new"->"ye_company_zz_info"
"m_source_movie_detial_new"->"ye_director_info"
"m_source_movie_detial_new"->"dw_ye_film_info"
"film_classify"->"vc_film_code_relation"
"m_source_movie_detial_new"->"vc_film_code_relation"
"m_source_movie_detial_new"->"dwm_yx_boxoffice_cinema_day"
"vc_system_operation_log"->"dw_cinema_loss"
"cinemas"->"dw_zd_cinema_info"
"cinema_chains"->"dw_zd_cinema_info"
"organizations"->"dw_zd_cinema_info"
"cinema_organization_relationships"->"dw_zd_cinema_info"
"movies"->"dw_zd_film_info"
"film_code_relation"->"dw_zd_film_info"
subgraph cluster_pdw{label="pdw"dw_dadi_ticket_success dw_exchange_success dw_goods_order_success dw_goods_sub_order_success dw_plan_info dw_plan_simple_info dw_recharge_success dw_sale_payment_detail_all dw_sale_payment_detail_success dw_ticket_all dw_ticket_success dw_report_film_office_box dw_activity_cinema_info dw_activity_extension_info dw_activity_marketing_info dw_activity_info dw_activity_scheme dw_card_info dw_film_info dw_gift_storag_info dw_marketing_tool_cinema_day dw_oa_cinema_info dw_outlinecard dw_user_info dw_cinema_all dw_cinema_info_snapshot dw_cinema_info cinema_hall_boxoffice_yymmdd cinema_hall_boxoffice_yymmdd cinema_hall_boxoffice_yymmdd dw_demo ye_actor_info dw_ye_cinema_hall_box_info dw_ye_cinema_info ye_company_cp_info ye_company_fx_info ye_company_info ye_company_zz_info ye_director_info dw_ye_film_info vc_film_code_relation dwm_yx_boxoffice_cinema_day dw_cinema_loss dw_zd_cinema_info}}
	</textarea>
	<input type="submit" value="预览" onclick="showViz()">
	</div>
  </body>
</html>
